<script setup lang="ts">
import { onMounted, watch } from 'vue'
import { usePlayerStore } from '@/stores/player'
import { getMusicLyric } from '@/api/music'

const playerStore = usePlayerStore()

// 加载歌词
const loadLyrics = async () => {
  if (!playerStore.currentMusic.id) return
  
  try {
    const lyricText = await getMusicLyric(playerStore.currentMusic.id)
    playerStore.parseLyric(lyricText)
    
    // 重置滚动位置
    const container = document.querySelector('.lyrics-wrapper')
    if (container) {
      container.scrollTo({
        top: 0,
        behavior: 'instant'
      })
    }
  } catch (error) {
    console.error('加载歌词失败:', error)
    playerStore.lyrics = []
  }
}

// 监听当前音乐变化，重新加载歌词
watch(() => playerStore.currentMusic.id, () => {
  loadLyrics()
})

// 组件挂载时加载歌词
onMounted(() => {
  loadLyrics()
})
</script>

<template>
  <div class="lyrics-container">
    <div class="lyrics-wrapper">
      <div class="lyrics-padding"></div>
      
      <div v-for="(line, index) in playerStore.lyrics" 
           :key="index" 
           :class="['lyric-line', { active: index === playerStore.currentLyricIndex }]"
      >
        {{ line.text }}
      </div>
      
      <div class="lyrics-padding"></div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.lyrics-container {
  flex: 1;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  
  .lyrics-wrapper {
    flex: 1;
    overflow-y: auto;
    padding: 0 20px;
    mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      black 20%,
      black 80%,
      transparent 100%
    );
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      black 20%,
      black 80%,
      transparent 100%
    );
    
    scrollbar-width: none;
    -ms-overflow-style: none;
    &::-webkit-scrollbar {
      display: none;
    }
    
    .lyrics-padding {
      height: calc(50vh - 100px);
      min-height: 200px;
    }
    
    .lyric-line {
      height: 52px;
      line-height: 52px;
      font-size: 16px;
      color: var(--secondary-color);
      text-align: center;
      transition: all 0.3s ease;
      margin: 0;
      padding: 0;
      position: relative;
      z-index: 2;
      
      &.active {
        color: var(--primary-color);
        font-size: 18px;
        font-weight: 500;
      }
    }
  }
}
</style> 